<template lang="html">
  <div class="panel">
    <h2>{{title}}</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props : {
    title : {
      type : String,
    }
  }
}
</script>

<style lang="scss" scoped>
.panel {
  position: relative;
  h2 {
    position: absolute;
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    color: #fff;
    margin-left: 50%;
    margin-top: -4px;
    transform: translateX(-50%);
  }
}

@media screen and (max-height:900px) {
  h2{
    font-size: 18px;
  }
}
@media screen and (max-height:768px) {
  h2{
    font-size: 116px;
  }
}
</style>
